<template>
	<view class="goods-card">
		<view class="item fadeInUp" v-for="(item,i) in list" :key="i"
			@tap="toPage(`/subpage/Product/details?id=${item.id}`)">
			<view class="img">
				<view class="image">
					<u--image :src="item.thumb"
					 :fade="true"
					 duration="450" 
					 width='100%'
					 height="auto"
					 :lazy-load="true"
					 radius="40rpx"
					 mode="widthFix">
						<template v-slot:loading>
							<u-loading-icon color="#468EFF"></u-loading-icon>
						</template>
						
					 </u--image>	
					<!-- <image  :src="item.thumb" mode="widthFix"></image> -->
					<view class="status" v-if="item.show1||item.all_count==item.sale_count" :class="{next:item.show}">
						<u-icon name="clock" color="#fff" v-if="item.time>0"></u-icon>
						<u-count-down v-if="item.time>0" @finish="onFinish(item.id)" :time="item.time" format="HH:mm:ss">
						</u-count-down>
						<text v-else-if="!item.sell_status && (item.all_count==item.sale_count)">已售罄 | {{item.type==1?"藏品":"盲盒"}}</text>
					
						<text v-else>开售中 | {{item.type==1?"藏品":"盲盒"}}</text>
					</view>
					
					<view class="status" :class="{expect:item.show}" v-if="item.show">
						<u-icon name="clock"></u-icon>
						<!-- <text v-if="item.show">敬请期待</text> -->
						<text v-if="item.show">{{item.sell_date}} {{item.sell_t}} 开售</text>
					</view>
					<!-- <view class="tys">
						<block v-for="(iitem,index) in item.label" :key="index">
							<text class="txt">{{iitem}}</text>
						</block>
					</view> -->
					<!-- <view class="bell_box" @click.stop="remindme" v-show="item.show ||item.show1">
						<u-icon name="bell" color="#F4C460"></u-icon>
						<text>提醒我</text>
					</view> -->
					<view class="item_cont">
						<view class="info">
							<view class="title u-line-1">{{item.title}}</view>
							<view class="price">
								<text class="rmb">￥</text>
								<text class="dw">{{item.base_price}}</text>
							</view>
						</view>
						<view class="btm">
							<view class="user">
								<image :src="item.portrait" mode="aspectFit"></image>
								<view class="name">
									{{item.user_name}}
								</view>
							</view>
							<view class="tags">
								<text>限量:</text>
								<text>{{item.all_count}}份</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'	

	export default {
		mixins: [mixin],
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				imgHeight: 1
			}
		},
		
		created(){
			
		},
		methods: {
			//计算图片比例
			// imageLoad(list,path,i) {
			// 	pathToBase64(path)
			// 	  .then(base64 => {
			// 	    this.$set(list[i],"thumb",base64)
			// 	  })
			// 	  .catch(error => {
			// 	    console.error(error)
			// 	  })
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.goods-card {
		display: flex;
		flex-wrap: wrap;
		.item {
			// position: relative;
			border-radius: 40rpx;
			overflow: hidden;
			// box-shadow: 2px 2px 8px 6px rgba(230, 230, 230, 0.5);
			// background-color: #FFFFFF;
			width: calc(100% - 20rpx);
			margin: 30rpx 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			.img {
				position: relative;
				width: 690rpx;
				// height: 690rpx;
				// min-height: 690rpx;
				
				.image {
					// position: relative;
				}
			
			.tys{
				position: absolute;				
				border-radius: 8rpx;
				bottom: 30rpx;
				left: 16rpx;
				display: flex;
				align-items: center;
				z-index:1;
				.txt {
					border-radius: 4rpx;
					min-width: 60rpx;
					height: 30rpx;
					padding: 5rpx;
					color: #FFF;
					background: #000;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-right: 10rpx;
				}				
				.txt:nth-child(2n){
					background: #50E3C2;
					color: #FFF;
				}
			}
				.status {
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					left: 0;
					box-sizing: border-box;
					padding: 8rpx 20rpx;
					height: 52rpx;
					font-size: 24rpx;
					color: #FFF;
					background: rgba(255,255,255,0.6500);
					border-radius: 22rpx 0px 33rpx 4rpx;
					backdrop-filter: blur(5px);

					text {
						margin-left: 12rpx;
					}

					&.next {
						color: #F3E0BC;

						::v-deep .u-icon__icon {
							color: #F3E0BC !important;
						}

						::v-deep .u-count-down__text {
							font-size: 24rpx;
							font-weight: 600;
							color: #F3E0BC;
						}

					}

					&.expect {
						color: #92D679;
						opacity: 0.7;

						::v-deep .u-icon__icon {
							color: #92D679 !important;
						}

						::v-deep .u-count-down__text {
							font-size: 24rpx;
							font-weight: 600;
							color: #92D679;
						}
					}
				}

				.bell_box {
					display: flex;
					align-items: center;
					position: absolute;
					right: 34rpx;
					top: 52rpx;
					background: #000000;
					box-sizing: border-box;
					padding: 5rpx 20rpx;
					height: 52rpx;
					opacity: 0.6;
					border-radius: 52rpx;
					font-size: 24rpx;
					font-weight: 600;
					color: #F4C460;

					&.next {
						color: #F4C460;

						::v-deep .u-icon__icon {
							color: #F4C460 !important;
						}

						::v-deep .u-count-down__text {
							font-size: 24rpx;
							font-weight: 600;
							color: #F3E0BC;
						}

					}

					&.expect {
						color: #F4C460;
						opacity: 0.7;

						::v-deep .u-icon__icon {
							color: #F4C460 !important;
						}

						::v-deep .u-count-down__text {
							font-size: 24rpx;
							font-weight: 600;
							color: #F4C460;
						}
					}
				}
			}

			.item_cont {
				position: absolute;
				// border-radius: 0 0 60rpx 60rpx;
				// padding: 12rpx 42rpx 30rpx 28rpx;
				width: 650rpx;
				height: 132rpx;
				background: rgba(255,255,255,0.65);
				border-radius: 12rpx;
				backdrop-filter: blur(10rpx);
				bottom: 20rpx;
				left: 50%;
				// transform: scaleX(-50%);
				transform: translateX(-50%);
				padding: 20rpx 24rpx;
				box-sizing: border-box;
				.info {
					display: flex;
					justify-content: space-between;
					.title {
						font-size: 28rpx;
						font-weight: 600;
						color: #1E0F1A;
						line-height: 40rpx;
						margin-bottom: 18rpx;
					}
					.price{
						font-weight: bold;
						.rmb{
							font-size: 20rpx;
						}
					}
				}
				.btm {
					display: flex;
					justify-content: space-between;
					.user {
						display: flex;
						image{
							height: 36rpx;
							width: 36rpx;
							border-radius: 100%;
							margin-right: 15rpx;
							background:  #f8f8f8;
						}
						.name {
							font-size: 24rpx;
							color: #555860;
						}
					}
				}

				.tags {
					font-weight: 400;
					color: #555860;
					font-size: 24rpx;
					font-weight: 600;
				}
			}
		}
	}
	
	
	
</style>
